<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html >
<head>
    <meta charset="UTF-8">
    <title>Contest - Online Judge</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" th:href="@{/css/styles.css}" >
    <link rel="stylesheet" th:href="@{/js/editormd/css/editormd.css}" />
    <link rel="stylesheet" th:href="@{/js/editormd/css/editormd.preview.css}" />
    <script th:src="@{/js/jquery-1.7.2.js}"></script>
    <script th:src="@{/js/gdoj.js}"></script>
    <script type='text/javascript' th:src="@{/js/editormd/lib/marked.min.js}"></script>
    <script type='text/javascript' th:src="@{/js/editormd/lib/prettify.min.js}"></script>
    <script type='text/javascript' th:src="@{/js/editormd/editormd.min.js}"></script>
    <script type='text/javascript' th:src='@{/js/editor-md.js}'></script>
    <script type="text/javascript">
        $(document).ready(function() {
            OnlineJudge.countdown();
        });
    </script>
    <link rel="stylesheet" th:href="@{/css/jquery-ui.css}" >
    <style>
        .ui-autocomplete-loading { background: white url('/img/loader.gif') right center no-repeat; }
        .ui-autocomplete {
            max-height: 200px;
            overflow-y: auto;
            /* prevent horizontal scrollbar */
            overflow-x: hidden;
            /* add padding to account for vertical scrollbar */
            padding-right: 3px;

            font-size:11px;
            line-height: 12px;
        }
        /* IE 6 doesn't support max-height
         * we use height instead, but this forces the menu to always be this tall
         */
        * html .ui-autocomplete {
            height: 200px;
        }
    </style>
</head>
<body>
<div th:replace="common::web-navbar"></div>
<div class="container">
    <div class="content">
        <div class="content-no-sidebar"> 	 <!-- class="content-with-sidebar" -->
            <div id="nav-content" >
                <a th:href="@{/contest/{contestId}(contestId=${contest.contest_id})}" class="current">[[#{contestproblems}]]</a>
                <a th:href="@{/contest/{contestId}/status(contestId=${contest.contest_id})}">[[#{status}]]</a>
                <a th:href="@{/contest/{contestId}/standings(contestId=${contest.contest_id})}" target="blank">[[#{standings}]]</a>
                <a th:href="'/contest/' + ${contest.contest_id} + '/status/' + ${session.session_username} + '/page/1'" target="blank">[[#{mysubmission}]]</a>
            </div>
            <div class="content" style="padding:3px 3px 3px 3px;">
                <div class="contest-data-title">
                    <h3 th:text="${contest.title}"></h3>
                    <div style="color: grey;">
                     [[#{contest.start-time}]]&nbsp;:&nbsp;<span th:text="${#dates.format(contest.start_time,'yyyy-MM-dd HH:mm:ss')}"></span>
                    &nbsp;&nbsp;[[#{contest.end-time}]]&nbsp;:&nbsp;<span th:text="${#dates.format(contest.end_time,'yyyy-MM-dd HH:mm:ss')}"></span>
                    </div>
                    <div id="contest_status" class="">
                        <span class="ended" th:if="${contest.status == 'ENDED'}">Contest Ended</span>
                        <span class="running" th:if="${contest.status == 'RUNNING'}">Contest Running</span>
                        <span class="pending" th:if="${contest.status == 'PENDING'}">Contest Pending</span>
                        <br/><span id="clock" th:text="${contest.leftTime}" style="color:grey"></span>
                        <script language="javascript">
                            var str = $("#clock").text();
                            var n = str.split(":");
                            var time = parseInt(n[0]) * 3600 + parseInt(n[1]) * 60 + parseInt(n[2]);
                            function clock() {
                                if (time > 0) {
                                    $("#clock").html(OnlineJudge.formatSeconds(time));
                                    time--;
                                    if (time == 0) {
                                        $("#contest_status").html("Contest Ended");
                                        $("#contest_status").attr('class', 'ended');
                                    }
                                    setTimeout(clock, 1000);
                                } else {
                                    $("#clock").html("");
                                }
                            }
                            $(document).ready(function(){
                                clock();
                            })
                        </script>
                    </div>
                </div>
                <div class="roundbox-contest">
                    <table class="problem">
                        <tr class="header">
                            <th class="id left-item">[[#{problemid}]]</th>
                            <th class="title">[[#{problem}]]</th>
                            <th class="point" th:if="${contest.type==1}">[[#{point}]]</th>
                            <th class="solved">[[#{solved}]]/[[#{submit}]]</th>
                            <th class="" th:if="${session.session_user_admin}">[[#{admin}]]</th>
                        </tr>
                        <tr th:if="${problems.size == 0}"><td class="left-item dark" colspan="15" style="text-align: left;">[[#{no-record}]]</td></tr>
                        <tr th:each="problem,stat : ${problems}" th:class="${stat.even}?'dark'">
                            <td class="id left-item"><a th:href="'/contest/' + ${problem.contest_id} + '/problem/' + ${problem.num}" th:text="${problem.num}"></a></td>
                            <td class="title" style="text-align: left;word-wrap:break-word;">
                                <a th:href="'/contest/' + ${problem.contest_id} + '/problem/' + ${problem.num}" th:text="${problem.title}"></a>
                            </td>
                            <td class="point" th:if="${contest.type==1}" th:text="${problem.point}"></td>
                            <td class="solved">
                                <a th:href="'/contest/' + ${contest.contest_id} + '/status/problem/' + ${problem.num} + '/page/1'" title="users solved this problem" th:text="${problem.solved}"></a>
                                <span style="font-size:11px;color:grey;font-family:verdana,Serif,Arial;" title="submissions"><sub>/<span th:text="${problem.submit}"></span></sub> </span>
                            </td>
                            <td class="" th:if="${session.session_user_admin}">
                                <a th:href="@{/admin/contest/{contestId}/problem/{num}/delete(contestId=${problem.contest_id},num=${problem.num})}" th:title="Delete">
                                    <svg class="icon-svg" viewBox="0 0 1024 1024" ><path d="M623.077 748.923c-17.598 0-31.82-14.223-31.82-31.82V367.025c0-17.598 14.222-31.827 31.82-31.827s31.827 14.23 31.827 31.827v350.075c0 17.6-14.228 31.822-31.827 31.822z m-190.945 0c-17.604 0-31.827-14.223-31.827-31.82V367.025c0-17.598 14.223-31.827 31.827-31.827 17.598 0 31.82 14.23 31.82 31.827v350.075c0 17.6-14.222 31.822-31.82 31.822z m509.193-541.02H782.201v-63.65c0-52.64-42.486-95.475-94.742-95.475H368.477c-52.634 0-95.47 42.836-95.47 95.475v63.65H113.885c-17.604 0-31.827 14.222-31.827 31.826 0 17.598 14.223 31.82 31.827 31.82h827.441c17.598 0 31.827-14.222 31.827-31.82 0-17.604-14.228-31.827-31.827-31.827z m-604.669-63.65c0-17.536 14.287-31.826 31.821-31.826H687.46c17.444 0 31.094 13.972 31.094 31.826v63.65H336.656v-63.65z m413.85 795.621H304.892c-52.635 0-95.47-42.836-95.47-95.475V366.55c0-17.569 14.257-31.826 31.822-31.826 17.57 0 31.826 14.257 31.826 31.826V844.4c0 17.569 14.288 31.826 31.823 31.826h445.613c17.565 0 31.823-14.257 31.823-31.826V367.852c0-17.565 14.228-31.823 31.826-31.823 17.599 0 31.827 14.258 31.827 31.823v476.547c0 52.64-42.841 95.475-95.476 95.475z" p-id="4281" fill="#8a8a8a"></path></svg>
                                </a>
                            </td>
                        </tr>
                        <form  class="contest-add-problem" action="" method="post" th:if="${session.session_user_admin}">
                            <tr>
                                <td class="id left-item">
                                    <span style="color:grey" th:utext="${idleNum}"></span>
                                    <input type="hidden" id="num" name="num" th:value="${idleNum}"/>
                                    <input type="hidden" id="contestId" name="contestId" th:value="${contest.contest_id}"/>
                                    <input type="hidden" th:if="${contest.type==0}" id="point" name="point" value="1">
                                </td>
                                <td class="title" style="text-align: left;word-wrap:break-word;">
                                    <div class="add-problem" style="float:left;">
                                        <input type="text"  style="width: 68px; height: 24px;" id="problemId" name="problemId" placeholder="PID">(Problem ID. or Title)
                                    </div>
                                    <div style="float:right;font-size:11px;padding-top:1px;text-align:right;">
                                        <input type="text" style="width: 228px; height: 24px;" id="title" name="title" placeholder="Title display at contest." th:value="'Problem ' + ${idleNum}">
                                    </div>
                                </td>
                                <td class="point" th:if="${contest.type!=0}">
                                    <input type="text" style="width: 50px; height: 24px;" id="point" name="point" value="1">
                                </td>
                                <td class="ratio">
                                    <input class='button_submit' type="submit" th:value="#{contest.add-problem}">
                                </td>
                            </tr>
                        </form>
                    </table>
                </div>
                <div>
                    <H3>[[#{contest.desc}]]</H3>
                    <div class="" style="margin: 6px;font-size: 12px;word-wrap:break-word;">
                        <div class="content markdown-view" id="contest-content-markdown-view">
                            <textarea style="display:none;" th:utext="${contest.description}"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="common::web-footer"></div>
</div>

<script th:src="@{/js/messager.js}"></script>
<script th:src="@{/js/jquery-ui.min.js}"></script>
<script type="text/javascript" th:if="${session.session_user_admin}">
    $(document).ready(function() {
        var cache = {},
            lastXhr;
        $( ".add-problem input" ).autocomplete({
            delay: 300,
            width:100,
            minLength: 1,
            selectFirst: false,
            matchSubset:true,
            matchContains: true,
            source: function( request, response ) {
                var term = request.term;
                if ( term in cache ) {
                    response( $.map( cache[ term ], function( item ) {
                        return {
                            label: item.problem_id+"."+item.title,
                            value: item.problem_id
                        }
                    }));
                    return;
                }
                lastXhr = $.getJSON( "/api/admin/problem/search", {q:request.term} , function( data, status, xhr ) {
                    cache[ term ] = data.data;
                    response( $.map( data.data, function( item ) {
                        return {
                            label: item.problem_id+"."+item.title,
                            value: item.problem_id
                        }
                    }));
                    if ( xhr === lastXhr ) {
                        response( $.map( data.data, function( item ) {
                            return {
                                label: item.problem_id+"."+item.title,
                                value: item.problem_id
                            }
                        }));
                    }
                });
            }
        });

        var formAddProblemSubmitListener = function () {
            var problemId = document.getElementById('problemId').value;
            var contestId = document.getElementById('contestId').value;
            var num = document.getElementById('num').value;
            var title = document.getElementById('title').value;
            var point = document.getElementById('point').value;
            postForm = function () {
                var formData = {
                    "contest_id":contestId,
                    "problem_id":problemId,
                    "num":num,
                    "title":title,
                    "point":point,
                }
                $.ajax({
                    type : "post",
                    url : "/api/admin/contest/problem/add",
                    data : JSON.stringify(formData),
                    contentType:"application/json",
                    dataType : "json",
                    success : function(data) {
                        if (data.code != 200) {
                            $.messager.show('错误', data.msg, 5000);
                            return;
                        }

                        $('input[type=submit]', this).attr('disabled', 'disabled');
                        $('.button_submit').attr('disabled', 'disabled');
                        window.location.href="/contest/" + contestId;
                    }
                });
            };
            postForm();
            return false;
        }

        $(".contest-add-problem").submit(formAddProblemSubmitListener);
    });
</script>
</body>
</html>